<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item>待接订单</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userlist">
              <div class="serchbox">
                <div class="serch">
                  <p class="title">创建时间：</p>
                  <el-date-picker class="input1" v-model="input.input3"  type="daterange"  range-separator="至"  start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" :default-time="['00:00:00', '23:59:59']"  @change="findList()"></el-date-picker>
                  <p class="title">订单状态：</p>
                   <el-select v-model="input.input6" placeholder="全部订单" @change="findList()">
                     <el-option label="全部订单" value="">全部订单</el-option>
                     <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">{{item.label}}</el-option>
                   </el-select>
                </div>
              </div>
              <div class="serchBtn">
                <!-- <el-button @click="findList()" class="btn">搜索订单</el-button> -->
                <el-button @click="findList()" class="btn btn1">批量接单</el-button>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="id" label="订单编号"></el-table-column>
                  <el-table-column prop="mouldName" label="商品信息">
                    <template slot-scope="scope">
                      <span class="mouldName">{{scope.row.mouldName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mechanicName" label="技工信息">
                    <template slot-scope="scope">
                      <span>{{scope.row.mechanicName}}/{{scope.row.mechanicPhoneNum}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="customerName" label="买家"></el-table-column>
                  <el-table-column prop="customerPhoneNum" label="收件人信息">
                    <template slot-scope="scope">
                      <span>{{scope.row.customerNickName}}/{{scope.row.customerPhoneNum}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="customerAddress" label="地址"></el-table-column>
                  <el-table-column prop="fare" label="路费">
                    <template slot-scope="scope">
                      <span>￥{{scope.row.fare}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                  <el-table-column prop="id" label="状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status==1">商户未接单</span>
                      <span v-if="scope.row.status==3" class="status3">被拒绝</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right"  width="100">
                    <template slot-scope="scope">
                      <el-button @click="toOrder(scope.row)" v-if="scope.row.status==1" type="text" size="small">接单</el-button>
                      <!-- <el-button @click="goToListDetails(scope.row)" type="text" size="small">查看</el-button> -->
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10,20,30,40,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total" class="pagination">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'WaitingList',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        options: [//订单状态
          {
            value: '1',
            label: '待接单',
          },{
            value: '3',
            label: '已拒绝',
          }
        ],
        input: {// 搜索输入框
          input3:null,//创建时间
          input6:null,//订单状态
        },
        tableData: [],// 表格
        multipleSelection: [], // 选择后的列表
      }
    },
    mounted() {
      this.findList();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 获取所有待接订单列表
      findList(){
        console.log(this.input)
        var createTimeStart,createTimeEnd = null
        if(this.input.input3){
          createTimeStart=this.input.input3[0]
          createTimeEnd=this.input.input3[1]
        }
        this.$axios.post(this.baseURL1+'admin/releaseRequirements/list',{
          "page":this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC",
          "status":this.input.input6,
          "createTimeStart":createTimeStart,
          "createTimeEnd":createTimeEnd
        }).then((res)=>{
          console.log(res,"所有用户");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 查看表格该列详情
      goToListDetails(row) {
        var data = row.id;
        this.$router.push({
          path: '/WaitingListDetail',
          query: {
            data: data,
          }
        })
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findList();
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findList();
      },
      //接单
      toOrder(row){
        this.$confirm('确认接单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'business/mechanicOrder/toOrder',{
            "id":row.id,
            "requestSource":"PC",
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '接单成功'
              });
              setTimeout(()=>{
                this.findList();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .userlist{
    overflow: hidden;
  }
  .serchbox{
    width: 100%;
    height: auto;
    .serch{
      width: auto;
      margin-right: 10px;
      display: inline-block;
      .title{
        width: 70px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
      }
      .input{
        width: 150px;
        display: inline-block;
        margin: 10px 10px;
        height: 30px;
      }
      .input1{
        width: 350px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #DCDFE6;
        padding-top: 0px;
        border-radius: 4px;
      }
    }
  }
  >>> .el-range-editor .el-range-input{
    height: 24px;
    line-height: 1;

  }
  >>> .el-input__inner{
    width: 150px;
    display: inline-block;
    margin: 7px 10px 7px 0;
    height: 30px;
  }
  >>> .el-select .el-input .el-select__caret{
    margin-right: 5px;
  }
  .serchBtn{
    width: 100%;
    height: auto;
    margin: 10px 20px 10px 70px;
    .btn{
      padding: 0 10px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #fc7656 ;
      color: #fff;
    }
    .btn1{
      background-color: #fff ;
      color: #fc7656;
      border-color: #fc7656;
    }
  }
  .pagination{
    width: 90px;
    >>> .el-input__inner{
      width: 100%;
    }
  }
  // 表格样式
  .mouldName{
    color: #409EFF!important;
  }
  .disbursements,.red{
    color: #fc7656;
  }
  .status3{
    color: red;
  }
</style>
